<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	*{margin: 0;padding: 0;}
	#box{border: 1px solid #ccc;margin: 100px 200px;float: left; width: 608px;}
	input{float: left;}
	ul{list-style: none;}
	li{width: 100px;height: 40px;border: 1px solid aqua;float: left;text-align: center;line-height: 40px;border-right: none;background: #fff;cursor: pointer;}
	li:nth-child(1){background: red;color: #fff;}
	li:last-child{border-right:1px solid aqua; }
	#bottom{width: 100%;height: 300px;background: red;text-align: center;;color: #fff;}
	</style>
</head>
<body>
	<div id="box">
		<div id="top">
			<ul>	
			</ul>
		</div>
		<div id="bottom"></div>
	</div>
	<script>
			var ul = document.getElementById("top").getElementsByTagName("ul")[0]
			,	bottom = document.getElementById("bottom");
			var colorData = ["red","blue","green","pink","aqua","tan"]
			,	schoolData = ["花边新闻","体育新闻","娱乐新闻","科技新闻","财经新闻","军事新闻"];
			for(var i=0;i<schoolData.length;i++){
				var li = document.createElement("li");
				if(i == 0){
					li.style.background = colorData[i];
					bottom.innerHTML = schoolData[i];
				}
				li.innerHTML = schoolData[i];
				li.index = i;
				ul.appendChild(li);
				li.onclick=function(){
					var lis = ul.getElementsByTagName("li");
					for(var j=0;j<schoolData.length;j++){
						lis[j].setAttribute("style","background:#fff;color:#000;")
					}
					lis[this.index].setAttribute("style","background:"+colorData[this.index]+";color:#fff;");
					bottom.setAttribute("style","background:"+colorData[this.index]+";");
					bottom.innerHTML = "　第一金牌日的射击赛场，41岁的越南老将黄春荣在全场观众齐声为本土选手阿尔梅达呐喊助威的嘈杂环境中，上演了经典大逆转，在最后一枪落后对手0.2环，且最后一次击发对手率先打出10.1环的不错成绩后，黄春荣以一发近乎完美的10.7环锁定了男子10米气手枪的金牌，这也是越南奥运史上的第一金";
				}
			}	
	</script>
</body>
</html>